<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../org/angular.min.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl">

    <div>商品：{{goods.name}} </div>
    <div>数量：
        <input type="number" ng-model="goods.num"></div>
    <div>单价：{{goods.price}}</div>
    <div>邮费：{{goods.fee}}</div>
    <div>总价：{{getTotal()+fee}}</div>

    <script>
        var m = angular.module('app', []);
        m.controller('ctrl', ['$scope', function($scope) {
            $scope.goods = {
                name: '苹果',
                price: 30,
                num: 2,
                fee: 10
            };
            $scope.fee = $scope.goods.fee;
            $scope.getTotal = function() {
                return $scope.goods.price * $scope.goods.num;
            }
            $scope.$watch('getTotal()', function(newData, oldData) {
                if (newData >= 100) {
                    $scope.fee = 0;
                } else {
                    $scope.fee = $scope.goods.fee;
                }
            }, true)
        }])
    </script>
</body>

</html>
